<template>

  <div class="app-container">
    <el-steps :space="360" :active="1" finish-status="success" align-center="true">
      <el-step title="发起申请"></el-step>
      <el-step title="待处理"></el-step>
      <el-step title="处理成功"></el-step>
    </el-steps>

    <el-form ref="form" :model="form" label-width="120px" >
      <table border="1" >
        <tr>
          <td>
            石油设备名称
          </td>
          <td>
            <el-form-item label="" style="margin-left: 0;" class="xxxx">
              <el-input v-model="form.name" style="margin-left: 0; " class="yyyy"/>
            </el-form-item>
          </td>

        </tr>
        <tr>
          <td>
            石油设备所属种类
          </td>
          <td>
            <el-form-item label="">
              <el-select v-model="form.region" placeholder="please select your zone">
                <el-option label="钻井设备" value="钻井设备" />
                <el-option label="抽油设备" value="抽油设备" />
                <el-option label="清管设备" value="清管设备" />
                <el-option label="加热设备" value="加热设备" />
              </el-select>
            </el-form-item>
          </td>

        </tr>

        <tr>
          <td>
            损坏时间
          </td>
          <td>
            <el-form-item label="">
              <el-col :span="11">
                <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 120%;" />
              </el-col>

            </el-form-item>
          </td>
        </tr>


        <tr>
          <td>
            石油设备损坏严重程度
          </td>
          <td>
            <el-form-item label="">
              <el-checkbox-group v-model="form.type">
                <el-checkbox label="一级" name="type" />
                <el-checkbox label="二级" name="type" />
                <el-checkbox label="三级" name="type" />
                <el-checkbox label="四级" name="type" />
              </el-checkbox-group>
            </el-form-item>
          </td>
        </tr>

        <tr>
          <td>
            申请者
          </td>
          <td>
            <el-form-item label="">
              <el-input v-model="form.resource"></el-input>
            </el-form-item>
          </td>
        </tr>

        <tr>
          <td>
           大概损坏信息描述
          </td>
          <td>
            <el-form-item >
              <el-input v-model="form.desc" type="textarea" />
            </el-form-item>
          </td>
        </tr>

      </table>
      <div class="lastone" >

          <router-link to="Record"><el-button>返回上一页</el-button></router-link>

      </div>
    </el-form>
  </div>
</template>

<script>
  import Record from './record'
  export default {
    components:{
      Record
    },
    data() {
      return {
        form: {
          name: '驴头',
          region: '抽油设备',
          date1: '2020.10.10',
          date2: '21:14:08',
          delivery: false,
          type: ['一级'],
          resource: 'tjh',
          desc: '用着用着，突然的崩溃了'
        },
        activities: [{
          content: '支持使用图标',
          timestamp: '2018-04-12 20:46',
          size: 'large',
          type: 'primary',
          icon: 'el-icon-more'
        }, {
          content: '支持自定义颜色',
          timestamp: '2018-04-03 20:46',
          color: '#0bbd87'
        }, {
          content: '支持自定义尺寸',
          timestamp: '2018-04-03 20:46',
          size: 'large'
        }, {
          content: '默认样式的节点',
          timestamp: '2018-04-03 20:46'
        }]
      }
    },
    methods: {
      onSubmit() {
        console.log(this.form)
        this.$message('submit!')
      },
      onCancel() {
        this.$message({
          message: 'cancel!',
          type: 'warning'
        })
      }
    }
  }
</script>

<style scoped>
  .line{
    text-align: center;
  }
  .xxxx{
    margin-left: 0 !important;
  }
  .yyyy{
    margin-left: 0 !important;
  }
  /deep/ .el-form-item__content{
    margin-left: 0px !important
  }
  table{
    margin-left: 300px;
  }

  .lastone /deep/ .el-form-item{
    margin-left: 456px!important
  }
  >>> .lastone{
    margin-left: 468px;
    margin-top: 50px;
  }
</style>

